<!--
 * @Author: Du.M
 * @Date: 2021-08-13 10:23:04
 * @LastEditTime: 2021-08-13 14:34:28
 * @FilePath: \mark-system\src\views\markSys\taskCenter\approve\showList\index.vue
-->
<template>
  <div class="approve-list">
    <el-tabs tab-position="left">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-bell"></i> 待办审批</span>
        <task-table
          :tabelData="penddingProcessList"
          :total="penddingTotal"
          :is-hand="false"
          @handPage="handPage"
        ></task-table>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i> 已办审批</span>
        <task-table
          :tabelData="hasProcessList"
          :total="hasTotal"
          :is-hand="true"
          @handPage="handPage"
        ></task-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { TaskIng, getCandite, getHasApproves } from "@/api/workflow.js";
export default {
  name: "ApproveList",
  components: {
    TaskTable: () => import("./components/TaskTable.vue")
  },
  data() {
    return {
      penddingProcessList: [], // 审批待办任务
      hasProcessList: [], // 审批已办任务
      hasTotal: 0, // 已办总数
      penddingTotal: 0 // 待办总数
    };
  },
  computed: {
    ...mapGetters(["id"])
  },
  mounted() {
    this.requestApproveList();
    this.requestHasApproves();
  },
  methods: {
    handPage(isHand, page) {
      if (isHand) {
        this.requestHasApproves(page);
      } else {
        this.requestApproveList(page);
      }
    },
    // 请求个人审批待办任务
    requestApproveList(page = 1) {
      TaskIng(this.id, "SP", page).then(res => {
        this.penddingProcessList = res.data.data || [];
        this.penddingTotal = res.data.count;
        // this.receivePagerList = this.formData(res.data.data, 'createTime')
      });
      // 请求个人审批已办任务
    },
    // 请求已办审批
    requestHasApproves(page = 1) {
      getHasApproves(this.id, "SP", page).then(res => {
        this.hasProcessList = res.data.data;
        this.hasTotal = res.data.count;
      });
    }
  }
};
</script>
      <style lang="scss">
.approve-list {
  padding: 20px 0;
  .el-tabs__nav-scroll {
    padding: 0;
  }
  .el-tabs--left {
    @media only screen and (max-width: 500px){
      .el-tabs__header.is-left {
      width: 120px !important;
    }
    }
    .el-tabs__header.is-left {
      width: 140px;
    }
    .el-tabs__nav-wrap.is-left {
      height: 120px;
    }
  }
}
</style>
      <style>
</style>
      